<template>
	<view class="page">
		<!-- 标题栏   start-->
		<fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
			<block slot="content">{{i18n['兑换记录']}}</block>
		</fu-custom>
		<!-- #ifdef H5 -->
		<view class="navbar flex w100 height-88 bg-white" :style="{top:CustomBar+'px'}">
			<block v-for="(item, index) in navList" :key="index">
				<view class="nav-item flex1 text-df text-666 flex align-center justify-center relative"
					:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{
    			item.text }}</view>
			</block>
		</view>
		<!-- #endif -->
		<!-- #ifndef H5 -->
		<view class="navbar flex w100 height-88 bg-white">
			<block v-for="(item, index) in navList" :key="index">
				<view class="nav-item flex1 text-df text-666 flex align-center justify-center relative"
					:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{
    			item.text }}</view>
			</block>
		</view>
		<!-- #endif -->
		<!-- 标题栏  end -->
		<!-- 页面加载 start -->
		<!-- <fu-loading v-if="isShowLoading"></fu-loading> -->
		<!-- 订单列表 start -->
		<view class="list" v-if="!isShowLoading">
			<block v-for="(item, index) in listData" :key="index">
				<view
					class="order-item margin-top-24 margin-lr-24 bg-white radius-16 flex flex-direction padding-left-24"
					@click.stop="navToOrderDetail(item)">
					<view class=" padding-right-24 text-df text-666 relative flex align-center height-104 ">
						<text class="flex1">
							<text>{{i18n['订单编号']}}: {{ item.order_sn }} </text>
						</text>
						<text class="text-theme">{{ item.status | filterStatus }}</text>
					</view>
					<view class="goods-box-single flex padding-bottom">
						<!-- <image class="goods-img radius" :src="goodsItem.goods_thumb" mode="aspectFill"></image> -->
						<view class=" fu-block-200 radius-16 overHidden">
							<fu-image :src="item.goods_thumb" mode="aspectFill" radius="6rpx"></fu-image>
						</view>
						<view class=" overHidden flex1 flex justify-between flex-direction padding-lr">
							<view>
								<view class="text-df text-333 text-cut-2 text-weight-500">
									{{ item.goods_name }}
								</view>
								<view class="text-sm text-999 text-cut margin-top-8" v-if="item.sku_name">
									{{ item.sku_name }}
								</view>
							</view>
							<view class="flex justify-between align-center margin-top-sm">
								<view class="flex align-center">
									<text class="text-osd text-black text-bold text-df text-prices"
										style="font-size:36rpx;">{{ item.total_integral || 0}}</text>
									<text class="text-df text-black text-bold  " style="font-size:22rpx;">
										{{i18n['积分']}}</text>
									<view class="" v-if="item.payable_money>0">
										<text class="text-black" style="padding:0 10rpx;">+</text>
										<text class="text-df text-black text-bold text-prices" style="font-size:36rpx;">
											{{ item.shop_price }}</text>
										<text class="text-bold text-333" style="font-size:22rpx;">{{i18n['元']}}</text>
									</view>
								</view>
								<view class="text-sm text-999">
									x {{ item.num }}
								</view>
							</view>
						</view>
					</view>
					<!-- 按钮操作 start -->
					<view class=" margin-top-10 solid-bottom margin-right-30"></view>
					<!-- <view class="flex align-center justify-end padding-top-20 padding-lr">
						<text class="text-999 text-sm ">合计：</text>
						<text class="text-orange text-bold text-df">{{item.total_integral}} {{i18n['积分']}}
						<text v-if="item.real_money>0">+ {{item.real_money}}</text>		</text>
					</view> -->
					<view class="flex justify-between align-center">
						<view class="text-sm   ">
							<!-- <text class="text-666"
								v-if="item.status == 0 && item.cancel_time">{{i18n['剩余时间']}}：{{ unpayTimeList[item.order_sn].hours }}:{{ unpayTimeList[item.order_sn].minutes }}:{{ unpayTimeList[item.order_sn].seconds }}</text> -->
						</view>
						<view class="action-box margin-right-24 relative padding-top-24 flex align-center justify-end">
							<view
								class="action radius-28 text-666 margin-left-20 width-160 height-56 text-sm line-height-56 text-center round   margin-bottom-sm"
								:class="item.status == -1?'default_bg text-333 ':'text-333'" v-if=" item.status == -1 ||
                item.status == 4 ||item.status == 3||
                item.status == 7" @click.stop="delOrder(item.order_sn)" style="color: #333333;">
								{{i18n['删除订单']}}
							</view>
							<view
								class="action radius-28 text-666 margin-left-20 width-160 height-56 text-sm line-height-56 text-center round   margin-bottom-sm"
								:class="item.status == -1?'default_bg text-333 ':''" v-if="item.status == 0"
								@tap.stop="cancelOrder(item.order_sn)">
								{{i18n['取消订单']}}
							</view>
							<!-- <button class="action radius-28 text-666 margin-left-20 width-160 height-56 text-sm line-height-56 text-center round   margin-bottom-sm" v-if="item.status == 0"
								@tap.stop="cancelOrder(item.order_sn)" >
								{{i18n['取消订单']}}
							</button> -->
							<button
								class="action radius-28 text-666 margin-left-20 width-160 height-56 text-sm line-height-56 cu-btn    margin-bottom-sm"
								v-if="item.status == 0"
								@click.stop="toPay(item.order_sn, item.order_type)">{{i18n['去付款']}}</button>
							<button
								v-if="item.is_remind.info == 0 && item.status == 1  && ( item.order_type != 7 || item.final_status ==1) "
								class="action radius-28 text-666 margin-left-20 width-160 height-56 text-sm line-height-56 cu-btn round bg-theme  margin-bottom-sm"
								@click.stop="remindOrder(item.order_sn)">
								{{i18n['提醒发货']}}
							</button>
							<button
								v-if="item.is_remind.info == 1 && item.status == 1  && ( item.order_type != 7 || item.final_status ==1)"
								class="cu-btn round action radius-28 text-666 margin-left-20 width-160 height-56 text-sm line-height-56 have_click  margin-bottom-sm"
								disabled="false">
								{{i18n['已提醒']}}
							</button>
							<view
								class="action radius-28 text-666 margin-left-20 width-160 height-56 text-sm line-height-56 text-center  round   margin-bottom-sm"
								v-if="item.status == 2" @click.stop="seelogs(item.order_sn)">
								{{i18n['查看物流']}}
							</view>
							<button
								class="action radius-28 text-666 margin-left-20 width-160 height-56 text-sm line-height-56 cu-btn round  margin-bottom-sm"
								v-if="item.status == 2" @click.stop="receiveOrder(item.order_sn)">
								{{i18n['确认收货']}}
							</button>

							<!-- <button class="action radius-28 text-666 margin-left-20 width-160 height-56 text-sm line-height-56 cu-btn round   margin-bottom-sm"
								v-if="isContentShow([3], item.status)" @click.stop="evaluateOrder(item)">去评价</button> -->
							<!-- <button class="action cu-btn round   margin-bottom-sm" @click="navToOrderDetail(item)" v-if="item.status == 3">
                {{i18n['查看详情']}}
              </button> -->
						</view>
						<!-- 按钮操作 end -->
					</view>

				</view>
			</block>
		</view>
		<!-- 订单列表 end -->
		<!-- 空状态 start-->
		<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
			:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
		<!-- 空状态 end -->
		<!-- 网络监测 start -->
		<fu-notwork></fu-notwork>
		<!-- 网络监测 end -->
	</view>
</template>

<script>
	// 引入混入数据加载 js
	import pagingList from '@/common/mixin/paging_list.js';
	export default {
		mixins: [pagingList], //混入
		data() {
			return {
				isShowLoading: false, //是否显示页面初始化加载loading
				tabCurrentIndex: 0, //顶部导航 选择的第几个
				navList: [{
						state: 0,
						text: global.i18n['全部'],
						type: 'all'
					},
					{
						state: 1,
						text: global.i18n['待付款'],
						type: 'unpay'
					},
					{
						state: 2,
						text: global.i18n['待发货'],
						type: 'shipped'
					},
					{
						state: 3,
						text: global.i18n['待收货'],
						type: 'received'
					},
					// {
					// 	state: 4,
					// 	text: global.i18n['待评价'],
					// 	type: 'evaluated'
					// },
					{
						state: 5,
						text: global.i18n['已完成'],
						type: 'Completed'
					},
					{
					  state: 5,
					  text: global.i18n['已取消'],
					  type: 'cancel'
					},
				], // 订单状态切换列表
				type: 'all', //请求的订单类别
				minixPagingListsApi: global.apiUrls.postIntegralHistory, //混入获取列表接口名
				// allowOnloadGetList: false, //是否允许onlaod加载数据
				pageingListApiMethod: 'post', //接口类型属于get
			};
		},
		/**
		 * @description 过滤显示 状态换文本内容
		 * @param {val} val:状态码
		 */
		filters: {
			filterStatus(val) {
				switch (val) {
					case 0:
						return global.i18n["待付款"];
					case 1:
						return global.i18n["待发货"]
					case 2:
						return global.i18n["待收货"];
					case 3:
						return global.i18n["已完成"];
					case 4:
						return global.i18n["已评价"];
					case 6:
						return global.i18n["售后中"];
					case 7:
						return global.i18n["售后已完成"];
					case -1:
						return global.i18n["已取消"];
					case -2:
						return global.i18n["已删除"];
					default:
						return "";
				}
			},


		},
		onLoad() {
			this.setNavigationBarTitle(this.i18n['兑换记录'])
			// 监听页面更新
			uni.$on('refreshOrder', (res) => {
				this.onPageUpdata(res)
			});
		},
		onUnload() {
			// 移除页面更新监听
			uni.$off('refreshOrder', this.onPageUpdata)
		},
		methods: {
			/**
			 * @description 混入传参钩子函数
			 * @param type 获取数据类型 type 1为收藏列表 3为浏览历史
			 */
			pagingListPostData() {
				return {
					order_type: 12, //代表请求的是兑换积分订单
					type: this.type,
				};
			},
			/**
			 * @description 判断内容是否显示
			 * @param {String} arr = 要判断的数组
			 * @param {String | Number} val = 要判的值
			 */
			isContentShow(arr, val) {
				return arr.includes(val * 1);
			},
			/**
			 * @description   查看物流
			 * @param {Object} orderSn：订单编号
			 */
			seelogs(orderSn) {
				this.$urouter.navigateTo({
					url: "/pages/order/orderdetail/express-delivery/index",
					params: {
						order_sn: orderSn,
					},
				});
			},
			/**
			 *  @description 顶部tab点击
			 * @param {Object} index 导航栏选择序号
			 */
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.type = this.navList[index].type;
				this.pagingListToggle();
			},

			/**
			 * @description 去支付
			 * @param {string} sn = 订单号
			 * @param {Number} type = 订单类型
			 * */
			toPay(sn, type) {
				console.log(sn, type);
				this.$urouter.navigateTo({
					url: '/pages/integral/integral-order-process/pay-order/index',
					params: {
						order_sn: sn,
						order_type: 12
					}
				});
			},

			// 倒计时结束取消自动取消订单
			selfCancelOrder(sn) {
				this.$api
					.post(global.apiUrls.postCancelOrder, {
						order_sn: sn,
					})
					.then((res) => {
						if (res.data.code == 1) {
							// 更新列表页数据
							this.pagingListToggle();
						}
					});
			},

			/**
			 * @description 监听页面更新的回调函数
			 * @param {Object} res = 要更新的配置参数
			 */
			onPageUpdata(res) {
				let index = res.data.itemIndex;
				let item = this.listData[index];
				switch (res.type) {
					case 1: // 取消订单
						if (this.tabCurrentIndex == 0) {
							item.status = -1;
							this.listData.splice(index, 1, item);
						} else {
							this.listData.splice(index, 1);
						}
						break;
					case 2: //删除订单
						this.listData.splice(index, 1);
						break;
					case 3: //确认订单
						console.log('确认订单', index);
						if (this.tabCurrentIndex == 0) {
							item.status = 3;
							this.listData.splice(index, 1, item);
						} else {
							this.listData.splice(index, 1);
						}
						break;
					case 4: // 提醒收货
						this.pagingListToggle();
						break;
					case 5: // 发票 //评价
						this.pagingListToggle();
						break;
					case 6: // 发票 //评价
						this.pagingListToggle();
						break;
					default:
						break;
				}
			},


			/**
			 * @description  取消订单
			 * @param {type} sn :订单sn编码
			 */
			cancelOrder(sn) {
				this.$util.showModal({
					title: this.i18n["提示"],
					content: this.i18n["确定要取消订单吗?"],
					success: (res) => {
						if (res.confirm) {
							this.$api
								.post(global.apiUrls.postCancelOrder, {
									order_sn: sn,
									// return_id: reasonId
								})
								.then((res) => {
									if (res.data.code == 1) {
										this.$message.info(this.i18n["提交成功,正在为您取消订单"]);
										setTimeout(() => {
											this.pagingListToggle();
										}, 800);
									}
								})
								.catch((err) => {
									console.log("err: " + JSON.stringify(err));
								});
						}
					},
				});
			},
			/**
			 * @description 删除订单
			 * @param {Object} sn :订单sn编码
			 */
			delOrder(sn) {
				this.$util.showModal({
					title: this.i18n["确认删除此订单?"],
					content: this.i18n["删除后不可恢复"],
					success: (res) => {
						if (res.confirm) {
							this.$api.post(global.apiUrls.postDelOrder, {
									order_sn: sn
								})
								.then(res => {
									let data = res.data;
									if (data.code == 1) {
										this.$message.info(this.i18n["删除成功"]);
										this.pagingListToggle();
									} else {
										this.$message.info(data.msg);
									}
								})
								.catch((err) => {
									console.log("err: " + JSON.stringify(err));
								});
						}
					},
				});
			},

			/**
			 * @description 提醒发货
			 * @param {Object} sn:订单编号
			 */
			remindOrder(sn) {
				this.$api
					.post(global.apiUrls.postRemindShipment, {
						order_sn: sn
					})
					.then((res) => {
						// console.log("res: " + JSON.stringify(res));
						this.$message.info(this.i18n["已提醒,请耐心等待"]);
						this.pagingListToggle();
					})
					.catch((err) => {
						console.log("err: " + JSON.stringify(err));
					});
			},
			/**
			 * @description 确认收货
			 * @param {Object} sn 订单编号
			 */
			receiveOrder(sn) {
				this.$util.showModal({
					title: this.i18n["提示"],
					content: this.i18n["您是否确认收到货物?"],
					success: (res) => {
						if (res.confirm) {
							this.$api
								.post(global.apiUrls.postIntegralConfirmOrder, {
									order_sn: sn
								})
								.then((res) => {
									console.log("res: " + JSON.stringify(res));
									this.pagingListToggle();
								})
								.catch((err) => {
									console.log("err: " + JSON.stringify(err));
								});
						}

					},
				});
			},

			/**
			 * @description 查看订单详情
			 * @param {type} item  order_sn:订单编号    status:支付类型   order_type:订单类型
			 */
			navToOrderDetail(item) {
				this.$urouter.navigateTo({
					url: '/pages/integral/integralgoods/integral-order-detail/index',
					params: {
						order_sn: item.order_sn,
						status: item.status,
						order_type: item.order_type,
					},
				});

			},
			/**
			 * @description  去评价
			 * @param {Object} order_sn :订单编号
			 * @param {Object} order_type :订单类型
			 *
			 */
			evaluateOrder(item) {
				let goods_list = new Array;
				goods_list.push(item);
				uni.setStorageSync('order_goods_list', JSON.stringify(goods_list));
				this.$urouter.navigateTo({
					url: "/pages/order/evaluation/order-evaluation/index",
					params: {
						order_sn: item.order_sn,
						order_type: item.order_type
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
	}

	// 导航栏 start
	.navbar {
		padding: 0 5px;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: sticky;
		z-index: 99;
		top: 0;

		.nav-item {
			height: 100%;

			&.current {
				color: #333;
				font-weight: 600;

				&:after {
					content: "";
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 40rpx;
					height: 8rpx;
					background: $theme;
					border-radius: 80rpx;
				}
			}
		}
	}

	// 导航栏 end
	// 订单列表 start
	.order-item {

		//按钮状态  start
		.action-box {
			min-height: 10upx;

			.action {
				padding: 0;
				background: #F6F6F6;

				&.default_bg {
					background: #F6F6F6 !important;
				}
			}

			.action:last-child {
				// background: $bgtheme;			
				color: #ffffff;
				background: $theme;
				border: none;
			}

			.have_click {
				background-color: #BFBFBF !important;
			}

			.action+.action {
				margin-left: 20rpx;
			}
		}

		//按钮状态  end
	}

	// 订单列表 end
</style>
